<template>
  <div class="building">
    <div class="hd">
      <h2 class="title">楼栋管理</h2>
      <el-input
        class="ipt"
        clearable
        @clear="search"
        prefix-icon="el-icon-search"
        placeholder="请输入小区名"
        v-model="buidingName"
        @keyup.enter.native="search"
      ></el-input>
      <el-button type="primary" size="small" @click="search">查询</el-button>
      <el-button type="success" size="small" @click="addShow(true, '新建小区')"
        >新建小区</el-button
      >
    </div>
    <div class="bd">
      <Tree
        :list="buidingList"
        :searchText="seachText"
        :btnAdd="$utils.getPower('楼栋', '添加')"
        :btnUpdate="$utils.getPower('楼栋', '修改')"
        :btnDelete="$utils.getPower('楼栋', '删除')"
        @addRow="addShow"
        @delRow="deleteBuilding"
      />
    </div>
    <BuildingDialog :show="showDialog" @close="addShow" />
  </div>
</template>
<script>
import http from "./../api/building";
import Tree from "./../components/building/tree";
import BuildingDialog from "./../components/building/dialog";
export default {
  components: {
    Tree,
    BuildingDialog,
  },
  data() {
    return {
      buidingName: "",
      seachText: "",
      showDialog: false,
      buidingList: [],
      addForm: {
        id: 0,
        name: "",
        pid: 0,
      },
    };
  },
  created() {
    this.getBuildingList();
  },
  methods: {
    async getBuildingList() {
      const { data } = await http.buildingList();
      console.log(data)
      this.buidingList = data.list;
    },
    search() {
      this.seachText = this.buidingName;
    },
    addShow(show, title, data, flag) {
      console.log(show, title, data, flag);

      this.showDialog = show;
      this.$store.commit("building/SET_TITLE", title);
      if (show) {
        // 添加小区
        if (!data) {
          this.$store.commit("building/SET_ADDFORM", this.addForm);
        } else {
          // 添加子类
          if (flag === 0) {
            this.$store.commit("building/SET_ADDFORM", {
              id: 0,
              name: "",
              pid: data.id,
            });
          } else {
            // 修改
            this.$store.commit("building/SET_ADDFORM", {
              id: data.id,
              name: data.name,
              pid: data.pid,
            });
          }
        }
      } else {
        flag && this.getBuildingList();
        this.$store.commit("building/SET_ADDFORM", this.addForm);
      }
    },
    async deleteBuilding(data) {
      const { id } = data;
      this.$utils
        .messageTip("确定要删除吗？", "提示")
        .then(async () => {
          const { errCode } = await http.buildingDelete({ id });

          if (errCode === 10000) {
            this.$message.success("删除成功");
            this.getBuildingList();
          } else {
            this.$message.error("删除失败");
          }
        })
        .catch(() => {
          this.$message.info("取消删除");
        });
    },
  },
};
</script>

<style lang="less">
.hd {
  display: flex;
  align-items: center;
  padding: 10px 0 20px;
  border-bottom: 1px solid #eee;
  .title {
    font-size: 16px;
    color: #427ff4;
  }
  .ipt {
    width: 200px;
    margin: 0 10px;
  }
}
.el-tree-node__content {
  height: 40px !important;
}
.tree-list {
  width: 600px;
}
.custom-tree-node {
  display: flex;
  align-content: center;
  justify-content: space-between;
  width: 100%;
}
</style>